D25 - 初見 Server Side - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2022 iThome 鐵人賽

DAY 25

Modern Web

小白大戰基礎網頁開發系列第 25 篇

D25 - 初見 Server Side

14th鐵人賽

arieltyit122

2022-10-10 17:46:07

706 瀏覽

分享至

時光飛逝, 鐵人賽今天已經邁入第 25 天了!!! 在接下來的五天裡我們會介紹使用服務器端語言 (server-side language) 編寫 JSON-based 的 Web 服務。
踏入 server side 之前呢, 先讓我們來回顧一下至今所學到的 Web Service 吧!

Web Service 回顧:

可以使用通用協議 (common protocols): 通訊協議, 透過網際網路 (Internet) 調用的軟件功能, 通過聯繫 Web 服務器上的程序來完成的。也就是說, Web 服務允許使用通訊協議/方法在 Web 上的不同應用程序 (applications) 或者是裝置 (devices) 之間進行溝通。使用 Web 服務, 可以使兩個不同的應用程序或裝置相互溝通並交換訊息。

Web 服務可以用多種不同的語言來編寫
使用參數機制: 許多的 Web 服務接受參數並產生結果
客戶端通過瀏覽器使用 XML over HTTP 和/或 AJAX Fetch code 來聯繫服務器
- HTTP 是 Medium (媒介)
服務的輸出可能是 HTML，但也可能是文本 (text)、XML、JSON 或其他格式的內容
- JSON Format (格式) 被比較廣泛的使用
主要有兩種類型的 Web 服務: SOAP web service, RESTful web service (主流的 API 開發方式)

這些應用程序 (applications) 是如何溝通的?
How does the data or infomation flows go from here to there?
How do different applications and devices connect with each other to make users place an order (下訂單), make a reservation (預約定位) or book a flight (訂機票) ? 而使用者只需要輕鬆的點擊畫面或是輸入一些簡單的文字

數據和訊息需透過 Medium (媒介) 從這個 application 被傳輸/流動到另一個 application
1. Web 服務使用 HTTP（超文本傳輸協議）通過 Web 來發送請求 (requests) 和回應 (responses)。

數據和訊息傳輸的 Format (格式), 通常被普遍使用的兩種格式是 JSON 和 XML
Example of friends data in two different formats: XML and JSON

<friends>
    <friend>
        <name>Pig</name>
        <email>pig@unicorn.com</email>
        <address>Pig Village</address>
    </friend>
    <friend>
        <name>Pooh</name>
        <email>pooh@unicorn.com</email>
        <address>Forest</address>
    </friend>
</friends>

b. JSON

{"friends":
    [
        {"name":"Pig", "email":"pig@unicorn.com", "address":"Pig Village"},
        {"name":"Pooh", "email":"pooh@unicorn.com", "address":"Forest"}
    ]
}

綜合上述兩項不同格式的寫法後, 是不是可以明顯看出 JSON 格式寫法比較簡潔且更容易讀懂呢?

Web 服務是如何回應 (respond) 需求 (request) 的?

Credit: https://www.studytonight.com/post/understanding-what-api-is-and-how-it-works

在以上圖片的情況下，餐廳服務員的角色與 API 在 modern web 上傳遞數據中的角色非常相似, 如同一個服務員在執行一個 API 的功能:

從 source（例如應用程序或工程師）接收一組指令（request 請求）
將該請求 (request) 帶到數據庫 (database)
拿取 (fetch) 請求的數據
給予 source 回應 (response)

比方說, Web 服務器是所有與網站相關的檔案所在的位置; 瀏覽器或客戶端發送對 HTML 頁面的請求, 接著服務器回應 (respond) 請求的頁面。也可以說, 瀏覽器可以通過發送 HTTP 請求向服務器請求一些信息, 服務器處理該請求並以 JSON 或 XML 格式作為一個 HTTP response 訊息做適當的回覆回去給網頁瀏覽器。

使用者輸入 URL (example: ithelp.ithome.com.tw) 告知客戶端, 也就是瀏覽器, 去向 HTTP 服務器 (server) 發送出 HTTP request
透過 Internet, HTTP request 將 request 傳送到 server
server 經過一番搜尋後, 會判斷使用者的 request 有沒有可以對應到的內容, 內容可以是很多種不同的型式, 像是 HTML, PDF, MP4 檔
HTTP 回傳客戶端一個 response
1. if 相對應的內容存在, 回傳此內容 (https://ithelp.ithome.com.tw/) 給客戶端 (瀏覽器), 表示 request 成功 (200 OK)
2. if 找不到相對應的內容, 回傳 404 Not Found 錯誤訊息
HTTP Server 提供兩種網頁伺服器架構: 靜態網站 (Static Sites) 和 動態網站 (Dynamic Sites)
1. 靜態表示 HTTP Server 回傳給瀏覽器的 內容是寫死的, 例如, 一個 jpg 圖片檔或是 pdf 文檔
2. 動態表示 HTTP Server 回傳給瀏覽器的 內容是不固定 的, 可以 動態產生內容, 例如, it 邦幫忙的頁面會推薦使用者各種不一樣的廣告內容, 依據時間和使用者每次的刷新頁面去更新不同的內容
  1. 動態網站的程式碼需要是可以在服務器上運行的, 也就是我們之後會介紹到的 server-side programming, 也稱為 back-end programming/scripting

為何需要 Server 來幫我們處理 Web 服務的 Requests 呢?

Servers 是個 專用電腦 (dedicated computer), 用於有效處理數據並委派來自許多客戶端發送的請求,通常是同時進行的。
然而這些任務在客戶端的瀏覽器中是不可能的或不合適的。

Server-Side Programming

之前我們編寫了提供給使用者並且在瀏覽器中運行的程式碼。舉例來說, Javascript 監聽使用者行為然後執行操作 DOM 作為結果的程式碼。
然而, server-side programs 永遠不會提供給使用者。它們在服務器上會不斷地運行，等待請求 (requests), 就像 JS 監聽事件一樣。然後 server-side programs 將會運行程式碼並且向客戶端做出回應 (respond)。